// webpack.config.js是运行在node.js中.所以引入使用的是commonjs规范
const { resolve } = require('path')

// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 注意: 配置文件中的相对路径,相对的是命令行窗口的路径
  // 入口:
  entry: './src/index.js',
  // 出口
  output: {
    // path必须是绝对路径
    path: resolve(__dirname, 'build'), //打包之后的文件的路径
    // 打包之后的js叫什么名字
    filename: './js/build.js',
    clean: true, // 每次打包时,将path所指向的路径中的所有代码清除
    // 指定静态资源打包之后的目录
    assetModuleFilename: 'assets/[hash:8][ext]',
  },
  // 模式: 开发模式(development) ,生产模式(production,会压缩代码)
  mode: 'development',
  // 加载器. 帮助webpack完成一些webpack本身处理不了的事情
  module: {
    rules: [
      {
        test: /\.js$/, // 只检测js文件
        exclude: /node_modules/, // 排除node_modules文件夹
        enforce: 'pre', //可能值: "pre" | "post". pre表示前置执行, post表示后置执行
        use: {
          // 使用eslint-loader解析
          loader: 'eslint-loader',
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.less$/,
        // 三个loader的执行顺序,从右往左
        // 1. less-loader会调用less包,将less编译成css
        // 2. css-loader 会将编译好的css,添加到build.js中
        // 3. style-loader 会将build.js中的css代码,以内嵌的形式添加到html中
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        test: /\.css$/,
        // 2. css-loader 会将编译好的css,添加到build.js中
        // 3. style-loader 会将build.js中的css代码,以内嵌的形式添加到html中
        use: ['style-loader', 'css-loader'],
      },
      // {
      //   test: /\.(jpe?g|gif)$/,
      //   type: 'asset/resource',
      // },
      // {
      //   test: /\.png$/,
      //   type: 'asset/inline',
      // },
      {
        test: /\.txt/,
        type: 'asset/source',
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 5 * 1024, // 小于3kb以下的图片会被打包成base64格式
          },
        },
      },
    ],
  },
  // html-webpack-plugin的作用: 自动在build目录下创建一个html文件
  plugins: [
    new HtmlWebpackPlugin({
      // template的作用: 告诉当前插件,创建html文件时,以我们指定的html为模板
      template: './public/index.html',
    }),
  ],
  // 只在开发环境下配置.会监听我们src中的代码,如果发现src中代码发生变化,则会自动编译代码
  devServer: {
    static: {
      // 注意: 如果resolve中不写__dirname,则resolve会自动获取__dirname的路径和build进行拼接
      directory: resolve('build'), //基于打包后的文件夹作为静态资源服务器的根目录
    },
    port: 9000, //设置端口号
    open: true, //自动打开浏览器
  },
}
